﻿@page "/TimePicker/Time-Format"

@using Syncfusion.Blazor.Calendars
@using System.Collections
@using System

@inherits SampleBaseComponent;

<SampleDescription>
   <p>The TimePicker has been customized with 24-hour <code>format</code> with 60 minutes <code>interval</code>. Click the TimePicker icon to a select a time from 00:00 to 23:00 from the TimePicker popup.</p>
</SampleDescription>
<ActionDescription>
    <p>TimePicker provides an option to customize the display format of the time value using the
      <a href='https://blazor.syncfusion.com/documentation/timepicker/getting-started/#setting-the-time-format' target='_blank'>Format</a> property. It accepts <a href='https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings' target='_blank'>standard</a> &<a href='https://docs.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings' target='_blank'> custom date and time format strings</a> as specified in MSDN.
    </p>
    <p>Here, the time value displayed in 24-hour format with <code> 60 </code> minute step interval. To know more about custom time formatting, refer the <a href='https://ej2.syncfusion.com/aspnetcore/documentation/base/intl.html#custom-formats' target='_blank'> Parsing and formatting</a> section. By default, TimePicker component is formatted with `en` (English) culture.</p>
    <p>More information about the TimePicker and it's configuration can be found in the <a href='https://blazor.syncfusion.com/documentation/timepicker/getting-started/' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="timepicker-section">
        <div id="wrapper" class="timepicker-control">
            <div class="tabs-wrap">
                <div class="wrap">
                    <SfTimePicker TValue="DateTime?" Value="@TimeValue" Step=60 Format="HH:mm"></SfTimePicker>
                </div>
            </div>
        </div>
    </div>
</div>

@code {
    public DateTime? TimeValue { get; set; } = DateTime.Now;
}

<style>
    #wrapper {
        max-width: 300px;
        margin: 0px auto;
        padding-top: 20px;
    }

    .tabs-wrap {
        padding: 0 0px 10px;
    }

    .e-bigger .control-section {
        margin-top: 60px;
    }
</style>